<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>添加模版</title>
		<link rel="stylesheet" type="text/css" href="/webapp/css/easyui.css">
		<link rel="stylesheet" type="text/css" href="/webapp/css/icon.css">
		<link rel="stylesheet" type="text/css" href="/webapp/css/color.css">
		<link rel="stylesheet" type="text/css" href="/webapp/css/public.css">
		<script type="text/javascript" src="/webapp/js/lib/jquery.min.js"></script>
		<script type="text/javascript" src="/webapp/js/lib/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="/webapp/js/lib/jquery.global.settings.js"></script>
		<script type="text/javascript" src="/webapp/js/lib/ajaxfileupload.js"></script>
		<script type="text/javascript" src="/webapp/js/common/config.js"></script>
	</head>
	<body>
		<div class="easyui-container-fluid">
			<div class="easyui-panel" style="border: none;">
				<div class="nav" id="nav"></div>
				<div class="easyui-panel" style="border:none;">
					<form id="ff">
						<div style="margin-bottom:20px">
							<input type="hidden" name="entityStatus" value="OK"/>
							<input type="hidden" name="orderList" id="orderListId"/>
							<span id="wrap-template-code">
								<label class="item-label">模板编码：</label>
								<input type="text" name="code" class="easyui-textbox" style="width:128px;"/>
							</span>
							<label class="item-label"><span class="item-required">*</span>模版名称：</label>
							<input type="text" name="name" class="easyui-textbox" required="required" style="width:128px;"/>
							<label class="item-label"><span class="item-required">*</span>渠道：</label>
							<input type="text" id="channel" name="channelCode" class="easyui-combobox" validType="notNull['#channel']" style="width:128px;"/>
                            <label class="item-label"><span class="item-required">*</span>数据起始行：</label>
                            <input type="text" name="dataStartRow" class="easyui-textbox" required="required" style="width:128px;"/>
							<label class="item-label">商场名位置：</label>
							<select name="mallLocation" class="easyui-combobox" data-options="panelHeight:'auto'" style="width:200px;" >
								<option value="FILE">商场名为文件名</option>
								<option value="SHEET">商场名为Excel的sheet名</option>
								<option value="COLUMN">商场名在Excel的列中</option>
								<option value="NONE">一个渠道一个商场</option>
							</select>
							<label class="item-label">品类位置：</label>
							<select name="categoryLocation" class="easyui-combobox" data-options="panelHeight:'auto'" style="width:200px;" >
								<option value="FILE">品类名为文件名</option>
								<option value="SHEET">品类名为Excel的sheet名</option>
								<option value="COLUMN">品类名在Excel的列中</option>
							</select>
						</div>
						<div style="margin-bottom:20px;">
						</div>
						<table id="datagrid" class="easyui-datagrid" data-options="fitColumns:true,scrollbarSize:0">
			             </table>
						<div style="margin-top:20px;margin-bottom: 20px;text-align: center;">
							<a href="javascript:void(0);" class="easyui-linkbutton c8" style="width:80px" onclick="save()">保存</a>
							<a href="javascript:void(0);" class="easyui-linkbutton" style="width:80px;" onclick="cancel()">取消</a>
						</div>
					</form>
				</div>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		var id = getQueryParameter("id");
		$(function () {
		    function initForm() {
                if(id){
                    $.ajax({
                        url:config.url +"/template/" + id,
                        type:'get',
                        data:{},
                        xhrFields:{withCredentials:true},
                        success:function(data){
                            //填充表单
                            if(data){
                                $("#ff").form("load",changeProperty2String(data));
                                $("#datagrid").datagrid({data:{content:data.columnMappings,totalElements:data.columnMappings.length}});
                            }
                        },
                        error:function(){

                        }
                    });
                }else{
                    $("#wrap-template-code").remove();
                    $("#orderListId").remove();
				}
            }
            $.when(initChannelSelect("channel")).done(function () {
				initForm();
            });
            $("#datagrid").datagrid({
				checkOnSelect:false,
                columns:[[
					{field:'columnIndex',align:'center', width:80 ,title:"列序号",
						editor:{
							type:"combobox",
							options:{
								textField:"text",
								valueField:"value",
								data:columnIndexArray,
								editable:true,
								panelHeight:'150'
							}
						}
					},
					{field:'columnType',align:'center', width:80,title:"列类型",
						editor:{
							type:"combobox",
							options:{
								textField:"text",
								valueField:"value",
								data:columnTypeArray,
								editable:true,
								panelHeight:'150',
								required:true
							}
						}
					},
					{field:'operate',align:'center',width:80,title:"操作",
						editor:{
							type:"combobox",
							options:{
								textField:"text",
								valueField:"value",
								data:operateTypeArray,
								editable:true,
								panelHeight:'auto'
							}
						}
					},
					{field:'operateValue',align:'center',width:80, title:"操作值",editor:{type:"textbox"}},
					//后台自动识别，无需前端手动加格式
                    // {field:'pattern',align:'center',width:80, title:"日期格式",
					// 	editor:{
                    //     	type:"combobox",
					// 		options:{
                    //     	    textField:"text",
					// 			valueField:"value",
					// 			editable:true,
					// 			data:dateArray,
					// 			panelHeight:150
					// 		}
                    //     }
					// },
					{field:'filter',align:'center', width:80,title:"删除值",editor:{type:"textbox"}},
					{field:'include',align:'center', width:80,title:"删除包含值",editor:{type:"textbox"}},
					{field:'exclude',align:'center', width:80,title:"剩余值",editor:{type:"textbox"}},
					{field:'action',align:'center',width:80,title:"编辑",formatter:actions}
				]],
				onLoadSuccess:function (data) {
					for(var i=0;i<data.total;i++){
						$("#datagrid").datagrid("beginEdit",i);
					}
				},
				toolbar:[{
					text:"添加列",
					handler:function () {
						addRow();
					}
				}],
				emptyMsg:"暂时没有列映射",
				onBeforeSelect:function () {
					return false;
                }
        	});
        });


        var columnTypeArray = [
            {value:"MALL","text":"商场"}, {value:"MALL_CODE","text":"商场码"},
			{value:"BRAND","text":"品牌"}, {value:"CATEGORY","text":"品类"},
			{value:"MODEL","text":"型号"}, {value:"BRAND_CATEGORY","text":"品牌品类"},
            {value:"BRAND_MODEL","text":"品牌型号"},{value:"BRAND_CATEGORY_MODEL","text":"品牌品类型号"},
            {value:"CATEGORY_MODEL","text":"品类型号"}, {value:"PRICE","text":"销价"},
			{value:"COUNT","text":"销量"},{value:"TOTAL","text":"销额"},
			{value:"WHOLE_PRICE","text":"批发价"}, {value:"WHOLE_COUNT","text":"批发量"},
            {value:"WHOLE_TOTAL","text":"批发额"},{value:"DATE","text":"日期"},{value:"URL","text":"网址"},
            {value:"CHANNEL_TYPE","text":"渠道(苏宁专用)"},{value:"MARK","text":"标记(特殊)"}
        ];
        var operateTypeArray = [
			{value:"NONE",text:"无操作"},
			{value:"MULTIPLY",text:"乘法"},
			{value:"DIVISION",text:"除法"}];
        var columnIndexArray = [
            {text:'A',value:"0"},  {text:'B',value:"1"},  {text:'C',value:"2"},
			{text:'D',value:"3"},  {text:'E',value:"4"},  {text:'F',value:"5"},
			{text:'G',value:"6"},  {text:'H',value:"7"},  {text:'I',value:"8"},
			{text:'J',value:"9"},  {text:'K',value:"10"}, {text:'L',value:"11"},
			{text:'M',value:"12"}, {text:'N',value:"13"}, {text:'O',value:"14"},
			{text:'P',value:"15"}, {text:'Q',value:"16"}, {text:'R',value:"17"},
			{text:'S',value:"18"}, {text:'T',value:"19"}, {text:'U',value:"20"},
			{text:'V',value:"21"}, {text:'W',value:"22"}, {text:'X',value:"23"},
			{text:'Y',value:"24"}, {text:'Z',value:"25"}];
        var dateArray = [
            {value:"NONE",text:"--请选择--"},
            {value:"PART",text:"yyyy年M月d日"},
            {value:"PART10",text:"yyyy年MM月dd日"},
            {value:"PART1",text:"yyyy-M-d"},
            {value:"PART2",text:"yyyy/M/d"},
            {value:"PART9",text:"yyyy.MM.dd"},
            {value:"PART3",text:"yyyy.M.d"},
            {value:"PART4",text:"yyyy-M-d HH:mm:ss"},
            {value:"PART5",text:"yyyy/M/d HH:mm"},
            {value:"PART6",text:"yyyyMMdd"},
            {value:"PART7",text:"MM.dd"},
            {value:"PART8",text:"M-d"}
		];
        function getDataOfDataGrid(){
            var data = [];
            var rows = $("#datagrid").datagrid("getRows");
            for(var i=0;i<rows.length;i++){
                var row = rows[i];
                var record = {};
                for(var key in row){
                    var ele = $("#datagrid").datagrid("getEditor",{index:i,field:key});
                    if(ele&&ele.target){
                        var val  = $(ele.target).val();
                        record[key] = (key=="columnIndex")?val||"0":val;
                        //record[key] = $(ele.target).val();
					}
				}
				data.push(record);
			}
            return data;
		}

		function actions(val,row,index) {
			return "<a class='easyui-linkbutton l-btn l-btn-small' style='width: 60px;' onclick='deleteRow("+index+")'>删除</a>";
        }

        function addRow(){
            var index = $("#datagrid").datagrid("getRows").length;
            $("#datagrid").datagrid("appendRow",{columnIndex:"0",columnType:"MALL",operate:"NONE",operateValue:"",pattern:"NONE",filter:"",include:"",exclude:""});
            $("#datagrid").datagrid("beginEdit",index);
		}

		function deleteRow(index){
            $("#datagrid").datagrid("deleteRow",index);
            var data = $("#datagrid").datagrid("getData");
            $("#datagrid").datagrid("loadData",{content:data.rows,totalElements:data.total});
		}

        function save(){
            $("#ff").form("submit",{
                onSubmit:function () {
                    var valid = $(this).form("enableValidation").form("validate");
                    var template = getFormData(document.getElementById("ff"));
                    var data = getDataOfDataGrid();
                    template.columnMappings = data;
                    var method = "post";
                    if(id){
                        template.id = id;
                        method = "patch";
					}
					console.log(template);
                    if(valid){
                        $.ajax({
							url:config.url+"/template",
							type:method,
							data:JSON.stringify(template),
							dataType:"json",
							contentType:"application/json;charset=UTF-8",
							xhrFields:{withCredentials:true},
							onBeforeSend:function () {
                                $.messager.progress({
                                    title:"请稍等",
                                    interval:50,
                                    text:"操作进行中..."
                                });
                            },
							complete:function () {
								$.messager.progress("close");
                            },
							success:function (data) {
								if(data.code==200){
								    $.messager.alert("提示","操作成功","info",function () {
                                        window.parent.closeCurrentTab(true);
                                    });
								}else {
									$.messager.alert("提示", data.msg, "error");
								}
                            },
							error:function (data) {
                                $.messager.progress("close");
                            }
						})
					}
					return false;
                }
			});
		}
		function cancel(){
            window.parent.closeCurrentTab();
		}
	</script>
</html>